<script src="lib/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">

  <label>
    ID：
    <input type="text" value="" v-model="n1" />
  </label>

  <label>
    NAME:
    <input type="text" value="" v-model='n2' />
  </label>
  <input type="button" id="btn" value="按钮" @click="click1" />

  <!--<ul>-->
  <!-- 给 ransition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果 -->
  <!--指定 transition-group 渲染为指定的元素，不指定 tag 属性，默认 span 标签 -->
  <!-- 列表必须写死 :key="item.id-->
  <transition-group appear tag="ul">
    <li v-for="(item,i) in list " @click=del(item.id) :key="item.id">{{item.id}}······{{item.name}}</li>
  </transition-group>
  <!--</ul>-->
</div>

<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      n1: '',
      n2: ' ',

      list: [{
        id: 1,
        name: "赵高",
        ctime: new Date()
      },
      {
        id: 2,
        name: "秦侩",
        ctime: new Date()
      },
      {
        id: 3,
        name: "魏忠贤",
        ctime: new Date()
      },
      {
        id: 4,
        name: "何进",
        ctime: new Date()
      },
      ]
    },
    methods: {
      click1() {
        newdata = {
          id: this.n1,
          name: this.n2,
          ctime: new Date()
        },
          this.list.push(newdata)
      },

      del(id) {
        this.list.some((item, i) => {
          if (item.id == id) {
            this.list.splice(i, 1)
          }
          return;
        })
      }

    },
  })

</script>

<style type="text/css">
  li {
    width: 100%;
    list-style: none;
    padding: 10px;
    border: dashed 1px;
  }

  li:hover {
    background-color: pink;
    transition: all 0.5s;
  }

  .v-enter,
  .v-leave-to {
    opacity: 0;
    transform: translateY(100px);
  }

  .v-enter-active,
  .v-leave-active {
    transition: all 0.6s ease;
  }

  /* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */
  .v-move {
    transition: all 0.6s ease;
  }

  .v-leave-active {
    position: absolute;
  }
</style>